import React from 'react';
// 导入 ReactDOM
import ReactDOM from 'react-dom/client';

// 创建渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 定义一个有状态组件，类组件
class App extends React.Component {
  constructor() {
    // 初始化this
    super();
    this.state = {
      count: 0,
    };
  }
  // 渲染UI
  render() {
    console.log(this);
    console.log(this.state);
    return (
      <div>
        <h1>我是一个有状态组件</h1>
        <h2>计数器：{this.state.count}</h2>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          +1
        </button>
      </div>
    );
  }
}

// 渲染这个标签（React 元素）
root.render(
  <div>
    <App />
  </div>
);
